<template>
  <div class="add">
    <div class="title">
      <img class="logo" src="../assets/分销团队.png" alt="" />
      <b>添加分销商</b>
    </div>

    <van-form
      @submit="onSubmit"
      required
      input-align="right"
      left-icon="arrow"
      :show-error-message="false"
    >
      <van-field
        v-model="addForm.distributorName"
        name="distributorName"
        label="分销商姓名"
        placeholder="请填写真实姓名"
        :class="{ active: flag.distributorName }"
        :rules="[
          {
            validator: validatorName,
            required: true,
            message: '请填写真实姓名',
          },
        ]"
        @blur="onBlur"
      />
      <van-field
        v-model="addForm.phone"
        name="phone"
        label="手机号"
        :class="{ active: flag.phone }"
        placeholder="请填写手机号"
        :rules="telRules"
        @blur="onBlur"
      />

      <van-field
        v-model="addForm.idCard"
        name="idCard"
        label="身份证"
        placeholder="请填写有效身份证"
        :class="{ active: flag.idCard }"
        :rules="[
          { required: true, message: '请填写身份证号' },
          { validator, message: '身份证号码格式错误！' },
        ]"
        @blur="onBlur"
      />
      <van-field
        v-model="addForm.bankCard"
        name="bankCard"
        label="银行卡 (工行)"
        placeholder="请填写有效的银行卡"
        :class="{ active: flag.bankCard }"
        :rules="[
          {
            validator: validatorIdCard,
            required: true,
            message: '请填写有效的银行卡',
          },
        ]"
        @blur="onBlur"
      />
      <p class="tips">注：请填写正确的工行卡号</p>

      <div class="btns">
        <button @click="add" class="add" >确认添加</button>
        <button @click="back" class="back">
          <span style="color: #ea9604">返回</span>
        </button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "addDistribution", // 添加分销商
  mounted() {
    //
  },
  data() {
    return {
      flag: { // 校验不通过显示 * 标识
        distributorName: true,
        phone: true,
        idCard: true,
        bankCard: true,
      },
      //   flag: true,
      addForm: {
        distributorName: "", // 分销商姓名
        phone: "", // 手机号
        idCard: "", // 身份证
        bankCard: "", // 银行卡
        phonePattern: /\d{6}/,
      },
      // 校验手机号码
      telRules: [
        {
          required: true,
          message: "手机号码不能为空",
          trigger: "onBlur",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            let flag =
              /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
                value
              );
            this.flag.phone = !flag;
            return flag;
          },
          message: "请输入正确格式的手机号码",
          trigger: "onBlur",
        },
      ],
    };
  },
  methods: {
    // 判断失去焦点时，输入框有没有值
    onBlur(e) {
      if (e.target._value == "") {
        if (e.target.name == "distributorName") {
          this.$toast({
            position: "top",
            message: "请填写真实姓名",
            duration: 700,
          });
          this.flag.distributorName = true;
        } else if (e.target.name == "phone") {
          this.$toast({
            position: "top",
            message: "请填写手机号",
            duration: 700,
          });
          this.flag.phone = true;
        } else if (e.target.name == "idCard") {
          this.$toast({
            position: "top",
            message: "请填写身份证",
            duration: 700,
          });
          this.flag.idCard = true;
        } else if (e.target.name == "bankCard") {
          this.$toast({
            position: "top",
            message: "请填写银行卡(工行)",
            duration: 700,
          });
          this.flag.bankCard = true;
        }
      }
    },
    // 校验通过  添加分销商
    onSubmit(values) {
      console.log("submit", values);
    },
    
    add() {
          // if(!this.flag.phone  && !this.flag.distributorName && !this.flag.idCard && !this.flag.bankCard){
          // console.log('22 ','校验通过' )
          // }
    },
    // 返回
    back() {},
    /**
     * 身份证验证
     */
    validator(val) {
      const card15 =
        /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/;
      this.flag.idCard = !card15.test(val);
      const card18 =
        /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      this.flag.idCard = !card18.test(val);
      return card15.test(val) || card18.test(val);
    },
    // 姓名校验
    validatorName(event, val) {
      if (val != "") {
        this.flag.distributorName = false;
      }
    },
    // 银行卡校验
    validatorIdCard(bankCard) {
      var cardTypeMap = {
        DC: "储蓄卡",
        CC: "信用卡",
        SCC: "准贷记卡",
        PC: "预付费卡",
      };

      function extend(target, source) {
        var result = {};
        var key;
        target = target || {};
        source = source || {};
        for (key in target) {
          if (target.hasOwnProperty(key)) {
            result[key] = target[key];
          }
        }
        for (key in source) {
          if (source.hasOwnProperty(key)) {
            result[key] = source[key];
          }
        }
        return result;
      }

      function getCardTypeName(cardType) {
        if (cardTypeMap[cardType]) {
          return cardTypeMap[cardType];
        }
        return undefined;
      }
      var bankcardList = [
        {
          bankName: "中国工商银行",
          bankCode: "ICBC",
          patterns: [
            {
              reg: /^(620200|620302|620402|620403|620404|620406|620407|620409|620410|620411|620412|620502|620503|620405|620408|620512|620602|620604|620607|620611|620612|620704|620706|620707|620708|620709|620710|620609|620712|620713|620714|620802|620711|620904|620905|621001|620902|621103|621105|621106|621107|621102|621203|621204|621205|621206|621207|621208|621209|621210|621302|621303|621202|621305|621306|621307|621309|621311|621313|621211|621315|621304|621402|621404|621405|621406|621407|621408|621409|621410|621502|621317|621511|621602|621603|621604|621605|621608|621609|621610|621611|621612|621613|621614|621615|621616|621617|621607|621606|621804|621807|621813|621814|621817|621901|621904|621905|621906|621907|621908|621909|621910|621911|621912|621913|621915|622002|621903|622004|622005|622006|622007|622008|622010|622011|622012|621914|622015|622016|622003|622018|622019|622020|622102|622103|622104|622105|622013|622111|622114|622017|622110|622303|622304|622305|622306|622307|622308|622309|622314|622315|622317|622302|622402|622403|622404|622313|622504|622505|622509|622513|622517|622502|622604|622605|622606|622510|622703|622715|622806|622902|622903|622706|623002|623006|623008|623011|623012|622904|623015|623100|623202|623301|623400|623500|623602|623803|623901|623014|624100|624200|624301|624402|623700|624000)\d{12}$/g,
              cardType: "DC",
            },
            {
              reg: /^(622200|622202|622203|622208|621225|620058|621281|900000|621558|621559|621722|621723|620086|621226|621618|620516|621227|621288|621721|900010|623062|621670|621720|621379|621240|621724|621762|621414|621375|622926|622927|622928|622929|622930|622931|621733|621732|621372|621369|621763)\d{13}$/g,
              cardType: "DC",
            },
            {
              reg: /^(402791|427028|427038|548259|621376|621423|621428|621434|621761|621749|621300|621378|622944|622949|621371|621730|621734|621433|621370|621764|621464|621765|621750|621377|621367|621374|621731|621781)\d{10}$/g,
              cardType: "DC",
            },
            {
              reg: /^(9558)\d{15}$/g,
              cardType: "DC",
            },
            {
              reg: /^(370246|370248|370249|370247|370267|374738|374739)\d{9}$/g,
              cardType: "CC",
            },
            {
              reg: /^(427010|427018|427019|427020|427029|427030|427039|438125|438126|451804|451810|451811|458071|489734|489735|489736|510529|427062|524091|427064|530970|530990|558360|524047|525498|622230|622231|622232|622233|622234|622235|622237|622239|622240|622245|622238|451804|451810|451811|458071|628288|628286|622206|526836|513685|543098|458441|622246|544210|548943|356879|356880|356881|356882|528856|625330|625331|625332|622236|524374|550213|625929|625927|625939|625987|625930|625114|622159|625021|625022|625932|622889|625900|625915|625916|622171|625931|625113|625928|625914|625986|625925|625921|625926|625942|622158|625917|625922|625934|625933|625920|625924|625017|625018|625019)\d{10}$/g,
              cardType: "CC",
            },
            {
              reg: /^(45806|53098|45806|53098)\d{11}$/g,
              cardType: "CC",
            },
            {
              reg: /^(622210|622211|622212|622213|622214|622220|622223|622225|622229|622215|622224)\d{10}$/g,
              cardType: "SCC",
            },
            {
              reg: /^(620054|620142|620184|620030|620050|620143|620149|620124|620183|620094|620186|620148|620185)\d{10}$/g,
              cardType: "PC",
            },
            {
              reg: /^(620114|620187|620046)\d{13}$/g,
              cardType: "PC",
            },
          ],
        },
      ];

      function getBankNameByBankCode(bankcode) {
        for (var i = 0, len = bankcardList.length; i < len; i++) {
          var bankcard = bankcardList[i];
          if (bankcode == bankcard.bankCode) {
            return bankcard.bankName;
          }
        }
        return "";
      }

      function _getBankInfoByCardNo(cardNo) {
        for (var i = 0, len = bankcardList.length; i < len; i++) {
          var bankcard = bankcardList[i];
          var patterns = bankcard.patterns;
          for (var j = 0, jLen = patterns.length; j < jLen; j++) {
            var pattern = patterns[j];
            if (new RegExp(pattern.reg).test(cardNo)) {
              var info = extend(bankcard, pattern);
              delete info.patterns;
              delete info.reg;
              info["cardTypeName"] = getCardTypeName(info["cardType"]);
              return info; //返回银行卡结果
            }
          }
        }
        return "error";
      }
      let res = _getBankInfoByCardNo(bankCard).bankCode;
      console.log("asdsadas", res);
      if (res == undefined) {
        this.$toast({
          position: "top",
          message: "请填写有效银行卡卡号",
          duration: 700,
        });
        return false;
      }
      if (res == "ICBC") {
        this.flag.bankCard = false;
      }
      // return _getBankInfoByCardNo(bankCard);
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  padding: 65px 32px 0;
  background: #ffffff;

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 100px;

    .logo {
      width: 30px;
      height: 34px;
      margin-right: 14px;
    }

    b {
      font-size: 34px;
    }
  }

  .btns {
    padding-left: 32px;

    > button {
      color: #fff;
      border-radius: 35px;
      height: 70px;
      padding: 0;
      border: 0;
      width: 254px;
    }

    .add {
      background: linear-gradient(225deg, #eba206, #eeb24b);
      margin-right: 98px;
    }

    .back {
      background: linear-gradient(225deg, #eba3062d, #eeb24b3a);

      span {
        color: #ea9604;
      }
    }
  }

  .tips {
    color: #ff0000;
    margin: 14px 0 78px;
    font-size: 24px;
    margin-left: 33px;
  }
}

::v-deep .van-field__label span {
  color: black;
}

::v-deep .van-cell {
  padding-left: 20px;
  margin: 10px 0;
}

::v-deep .van-cell::after {
  border-color: #d0d0d0;
  width: 660px;
  left: 20px;
}

// .van-cell--required {
//   &:before {
//     content: "";
//   }
::v-deep .active {
  span {
    position: relative;

    &:before {
      position: absolute;
      left: -14px;
      color: #ff0000;
      font-size: 14px;
      content: "*";
    }
  }

  //   }
}

::v-deep .van-toast--top {
  top: 10% !important;
}

::v-deep .toast {
  // position: fixed;
  top: 10% !important;
}
</style>